<template>

  <van-swipe-cell 
    class="box"
    v-for="item in cartList"
    :key="item.id"
    :before-close="beforeClose"
  >
     <van-card
       class="shopcart"
       
       :num="item.number"
       :price="item.price"
       :title="item.Product"
       :thumb="item.imgUrl"
     >
    <template #tags>
      <van-tag 
      color="rgb(244, 244, 244)" 
      text-color="rgb(127, 127, 127)" 
      round  
      type="primary" 
      >
      {{ item.type }}
      </van-tag>
    </template>
    <template #footer>

    </template>
  </van-card> 
    <template #right>
      <van-button square text="删除" type="danger" class="delete-button" />
    </template>
  </van-swipe-cell>
</template>

<script setup lang="ts">
import { onMounted} from 'vue';
import cartApi,{type userCartModel} from '@/api/cart'
import {ref} from 'vue'
import { showToast } from 'vant';
import { showConfirmDialog } from 'vant';
const isLoading = ref(false)

onMounted(()=>{
    getCartList()
})

//获取购物车列表
const cartList = ref<userCartModel[]>([])
const getCartList = async () => {
    isLoading.value = true
    try {
        let result = await cartApi.reqUserCartList()
        cartList.value = result.data
        // console.log(cartList.value)
    } catch (error) {
      showToast({
            message: '获取购物车列表失败',
        });
    }finally{
        isLoading.value = false
    }
}

const beforeClose = ({ position })=>{
    switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          return true;
        case 'right':
          return new Promise((resolve) => {
            showConfirmDialog({
              title: '确定删除吗？',
            }).then(resolve);
          });
      }
}
</script>

<style scoped>
.box{
  margin: 0 12px;
}
.shopcart{
    background-color: rgb(255,255,255);
    border-radius:10px;
    margin: 0;
    padding:8px 16px 8px 0 ;
}
.goods-card {
    margin: 0;
  }

  .delete-button {
    height: 100%;
  }
</style>